<!--
 * @Descripttion: 订阅组管理-列表
 * @Author: 何伟伦 weilun@ssc-hn.com
 * @Date: 2024-03-25
 * @LastEditors: 何伟伦 weilun@ssc-hn.com
 * @LastEditTime: 2024-03-27
-->
<template>
  <div class="ssc-list org-position-list">
    <div class="ssc-search">
      <a-row :gutter="24">
        <a-col :span="6">
          <a-form-item label="名称">
            <a-input v-model:value="searchParam.clientName" placeholder="请输入订阅组名称" />
          </a-form-item>
        </a-col>
        <a-col :span="18">
          <a-row justify="end">
            <a-button @click="clear()">重置</a-button>
            <a-button class="ml-4" type="primary" @click="search()">查询</a-button>
          </a-row>
        </a-col>
      </a-row>
    </div>
    <div class="ssc-table">
      <div class="ssc-table-header">
        <span class="ssc-table-header-title">订阅组管理</span>
        <a-button type="primary" @click="addApply()">
          <template #icon><plus-outlined :style="{ 'font-weight': 'bold' }" /></template>
          新建
        </a-button>
      </div>
      <a-table :columns="columns" :data-source="dataList" :loading="loading" :pagination="pagination" @change="onPaginationChange">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'createTime' || column.key === 'updateTime'">
            {{ new Date(column.key === 'createTime' ? +record.createTime : +record.updateTime).toLocaleString() }}
          </template>
          <template v-if="column.key === 'action'">
            <span>
              <a @click="editConfig(record)">开发配置</a>
              <a-divider type="vertical" />
              <a @click="edit(record)">访问权限</a>
            </span>
          </template>
        </template>
      </a-table>
    </div>
    <div class="modal">
      <AuthEdit v-model:visible="authEdit.visible" :authorities="authEdit.authorities" :client-id="authEdit.clientId" @success="authEdit.success" />
      <ConfigEdit v-model:visible="configEdit.visible" :data="configEdit.data" @success="configEdit.success" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { PlusOutlined } from '@ant-design/icons-vue'
  import { onMounted, reactive } from 'vue'
  import { useRouter } from 'vue-router'

  import { requestAppList } from '/@/api/system/app/config'
  import { useQueryPagination } from '/@/hooks/useQueryPagination'

  import AuthEdit from './components/AuthEdit.vue'
  import ConfigEdit from './components/ConfigEdit.vue'

  const router = useRouter()

  /** 搜索条件 */
  const searchParam = reactive({
    clientName: '',
  })

  /** 表格列配置 */
  const columns = [
    { title: '名称', dataIndex: 'clientName' },
    { title: '创建时间', dataIndex: 'createTime', key: 'createTime' },
    { title: '更新时间', dataIndex: 'updateTime', key: 'updateTime' },
    { title: '操作', key: 'action' },
  ]

  const { loading, queryList, dataList, pagination, onPaginationChange } = useQueryPagination<ApplyListTypes.IRequest, ApplyListTypes.IResponse[]>(searchParam, requestAppList)

  onMounted(() => queryList())

  /**
   * 重置
   */
  const clear = () => {
    searchParam.clientName = ''
    search()
  }

  /**
   * 搜索
   */
  const search = async () => queryList({ current: 1 })

  /**
   * 新增
   */
  const addApply = () => {
    router.push({
      path: '/apply/apply/add',
      query: { type: 0 },
    })
  }

  /** 访问权限弹窗 */
  const authEdit: { visible: boolean; clientId: string; authorities: string; success: Function } = reactive({
    visible: false,
    clientId: '',
    authorities: '',
    success: () => queryList(),
  })

  /** 开发配置弹窗 */
  const configEdit: { visible: boolean; data: any; success: Function } = reactive({
    visible: false,
    data: {},
    success: () => queryList(),
  })

  /**
   * 访问权限
   * @param record 访问权限
   */
  const edit = (record: ApplyListTypes.IResponse) => {
    authEdit.visible = true
    authEdit.authorities = record.authorities
    authEdit.clientId = record.clientId
  }
  /**
   * 开发配置
   * @param record 开发配置
   */
  const editConfig = (record: ApplyListTypes.IResponse) => {
    configEdit.visible = true
    configEdit.data = record
  }
</script>

<style lang="less" scoped></style>
